<template>
	<view class="container">
		<view class="header">
			<uni-search-bar radius="100" placeholder="请输入搜索内容…" v-model="data.keyword" bgColor="#f5f5f5" @confirm="search" />
			<view class="tabs">
				<view class="item" :class="{active:data.tabsactive==index}" v-for="(item,index) in data.tabslist" :key="index" @click="setTabs(index)">
					{{item}}
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" >
			<view class="content">
				<view class="item" v-for="item in data.list" :key="item.ID">
					<view class="top">
						<view class="image">
							<image :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="title1">
								{{item.name}}
							</view>
							<view class="title2">
								售价:{{$toFiexd(item.price,2)}}
							</view>
							<view class="title3">
								库存:{{$toFiexd(item.stock,0)}}
							</view>
						</view>
					</view>
					<view class="list">
						<view class="items" @click="$goURl('/pages/business/addGoods?id='+item.ID)">
							编辑<uni-icons type="compose" size="20"></uni-icons>
						</view>
						<view class="items" @click="deletes(item.ID,index)">
							删除<uni-icons type="trash-filled" size="20"></uni-icons>
						</view>
						<view class="items" @click="setgoods(item,1)" v-if="data.tabsactive==1">
							上架<uni-icons type="cloud-upload-filled" size="20"></uni-icons>
						</view>
						<view class="items" @click="setgoods(item,0)" v-if="data.tabsactive==0">
							下架<uni-icons type="cloud-download" size="20"></uni-icons>
						</view>
					</view>
				</view>
				<empty v-if="data.list.length==0"></empty>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		tabslist:['上架','下架','待审核','审核失败'],
		tabsactive:0,
		page:0,
		pages:1,
		size:10,
		id:0,
		list:[],
		keyword:''
	})
	onLoad((option)=>{
		data.id=uni.getStorageSync('businessID')
	})
	onShow(()=>{
		getgoods()
	})
	onPullDownRefresh(()=> {
			init()
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
		getgoods()
	})

	
	function shopClassList (){
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999`,
			method: 'get',
			success(res) {
			}
		})
	}
	function search(e){
		console.log(e)
		data.keyword=e.value
			init()
	}
	function setTabs(e){
		data.tabsactive=e
		init()
	}
	function init(){
		data.pages=1
		data.page=0
		data.list=[]
		
		getgoods()
	}
	//删除
	function deletes(id,index){
		uni.showModal({
			title: '提示',
			content: '确定删除改商品',
			success: function (res) {
				if (res.confirm) {
					proxy.$SHOPrequest({
						url:`business/add_goods/`,
						method:'DELETE',
						data:{
							id:id
						},
						success:(res)=>{
							uni.showToast({
								icon:'none',
								title:res.errmsg
							})
							if(res.errno==0){
									data.list.splice(index,1)
							}
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		
	}
	function setgoods(row,state){//上下架
		proxy.$SHOPrequest({
			url:`business/shortcutUpdateGoods/`,
			method:'POST',
			data:{
				id:row.ID,
				sort:row.sort,
				is_extension:row.is_extension,
				is_hot:row.is_hot,
				is_index:row.is_index,
				state:state
			},
			success:(res)=>{
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				init()
			}
		})
	}
	// 获取商品
	function getgoods(){
		if(data.page<data.pages){
			data.page++
			proxy.$SHOPrequest({
				url:`business/add_goods/?page=${data.page}&size=${data.size}&state=${[1,0,2,3][data.tabsactive]}&keyword=${data.keyword}`,
				method:'get',
				data:{
					page:data.page,
					size:data.size,
					keyword:data.keyword
				},
				success:(res)=>{
					
						uni.stopPullDownRefresh();
					res.data.data.forEach(item=>{
						data.list.push(item)
					})
					data.pages = Math.ceil(res.data.total / data.size)
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.header{
			background-color: #fff;
			padding: 20upx;
			width: calc(100% - 40upx);
			.tabs{
				display:flex;
				justify-content: space-around;
				.item{
					font-size: 32upx;
					font-weight: bold;
					padding-bottom: 15upx;
					border-bottom: 5upx solid #fff;
				}
				.active{
					color: $color1;
					border-bottom: 5upx solid $color1;
				}
			}
		}
		.content{
			padding: 20upx;
			height: calc(100vh - 350upx);
			.item{
				padding: 20upx;
				background-color: #fff;
				border-radius: 20upx;
						margin-bottom: 20upx;
				.top{
					display: flex;
					.image{
						width: 200upx;
						height: 200upx;
						border-radius: 20upx;
						image{
							width: 200upx;
							height: 200upx;
							border-radius: 20upx;
						}
					}
					.right{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20upx;
						width: calc(100% - 220upx);
						.title1{
							font-size: 28upx;
							font-weight: bold;
						}
						.title2{
							color: #999;
							font-size: 24upx;
						}
						.title3{
							color: #999;
							font-size: 24upx;
						}
					}
				}
				.list{
					display: flex;
					justify-content: flex-end;
					padding: 20upx 20upx 0 20upx;
					border-top: 1upx solid #eee;
					margin-top: 20upx;
					.items{
						margin-left: 30upx;
						display: flex;
						align-items: center;
						.uni-icons{
							margin-left: 10upx;
						}
					}
				}
			}
		}
	}
</style>
